<template>
  <div class="wr">
    <header-nav :index_num="index_num"></header-nav>
    <div class="wrapperr">
      <p class="title">党组织申请</p>
      <!-- 进度条 -->
      <div class="he">
        <div
          class="list"
          v-for="(item,index) in text"
          :key="index"
          :style="{'background-image': sub == index ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}"
        >
          <span :style="sub == index ? 'color:#fff' : 'color:#000'">{{item}}</span>
        </div>
      </div>

      <!-- 用户填写的内容 -->
      <form action method onsubmit="return false" enctype="multipart/form-data">
        <!-- 党组织申请1 -->
        <div id="boxOne" v-if="sub == 0">
          <h3>基本信息</h3>
          <div class="b">
            <div class="o">
              <label>
                <span>社会组织名称:</span>
                <input class="input" type="text" name="name" v-model="name" disabled />
              </label>
              <label>
                <span>社会组织类型:</span>
                <select name="type" v-model="type">
                  <template v-for="(list,index) in types">
                    <option :key="index" :value="index">{{list}}</option>
                  </template>
                </select>
              </label>
            </div>
            <div class="o">
              <label>
                <span>流动党员数量:</span>
                <input
                  class="input"
                  type="number"
                  min="0"
                  name="flow_party_person"
                  v-model="flow_party_person"
                />
              </label>
              <label>
                <span>已有党员数量:</span>
                <input
                  class="input"
                  type="number"
                  min="0"
                  name="party_person"
                  v-model="party_person"
                />
              </label>
            </div>
            <div class="o">
              <label>
                <span>从业人员总数:</span>
                <input class="input" type="number" min="0" name="work_person" v-model="work_person" />
              </label>
              <label>
                <span>党组织名称:</span>
                <input class="input" type="text" name="party_name" v-model="party_name" />
              </label>
            </div>
            <div class="o-zero">
              <span>是否建立党组织:</span>
              <div>
                <label for>
                  <input type="radio" name="is_reg_party" v-model="is_reg_party" value="1" checked />&nbsp;&nbsp;是
                </label>&nbsp;&nbsp;&nbsp;&nbsp;
                <label for>
                  <input type="radio" name="is_reg_party" v-model="is_reg_party" value="2" />&nbsp;&nbsp;否
                </label>
              </div>
            </div>
            <div class="o-one">
              <span>是否建立“功能型”党组织:</span>
              <div>
                <label for>
                  <input type="radio" name="is_reg_fun_party" v-model="is_reg_fun_party" value="1" />&nbsp;&nbsp;是
                </label>&nbsp;&nbsp;&nbsp;&nbsp;
                <label for>
                  <input type="radio" name="is_reg_fun_party" v-model="is_reg_fun_party" value="2" />&nbsp;&nbsp;否
                </label>
              </div>
            </div>
            <div class="o-o">
              <label>登记管理机关:</label>
              <input type="text" name="reg_manage" v-model="reg_manage" />
            </div>
            <div class="o-o">
              <label>业务主管单位:</label>
              <input type="text" name="supervisor" v-model="supervisor" />
            </div>
            <div class="o-two">
              <label>隶属的上一级党组织名称:</label>
              <input type="text" name="party_pname" v-model="party_pname" />
            </div>
          </div>
          <div class="btn" @click="btn(1)">下一页</div>
        </div>
        <!-- 党组织申请2 -->
        <div id="boxTwo" v-if="sub == 1">
          <!-- !!!!!! -->
          <h3>党组织书记情况</h3>
          <div class="b">
            <div>
              <label for>姓名:</label>
              <input type="text" name="sec_name" v-model="sec_name" />
            </div>
            <div style="display: flex;
          align-items: center;">
              <label for>姓别:</label>
              <label class="label">
                <input type="radio" name="sec_sex" v-model="sec_sex" value="1" />&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
                <input
                  type="radio"
                  name="sec_sex"
                  v-model="sec_sex"
                  value="0"
                />&nbsp;&nbsp;女
              </label>
            </div>
            <div>
              <label for>年龄:</label>
              <input type="text" v-model="sec_age" name="sec_age" title="请输入大于或等于零的阿拉伯数字" />
            </div>
            <div>
              <label for>行政职务:</label>
              <input type="text" v-model="sec_job" name="sec_job" />
            </div>
            <div>
              <label for>近三年参加上级党组织培训次数:</label>
              <input type="text" name="sec_study" v-model="sec_study" title="请输入大于或等于零的阿拉伯数字" />
            </div>
          </div>
          <!-- !!!!!! -->
          <h3 style="margin-top:35px;">党组织信息</h3>
          <div class="b">
            <div>
              <label for>近三年发展党员数:</label>
              <input
                type="text"
                name="near_party_person"
                v-model="near_party_person"
                title="请输入大于或等于零的阿拉伯数字"
              />
            </div>
            <div style="display: flex;
          align-items: center;">
              <label for>是否建立群团组织:</label>
              <label class="label">
                <input type="radio" name="is_reg_group" value="1" v-model="is_reg_group" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
                <input
                  type="radio"
                  name="is_reg_group"
                  value="2"
                  v-model="is_reg_group"
                />&nbsp;&nbsp;否
              </label>
            </div>
            <div>
              <label for>专职党务工作者人数:</label>
              <input
                type="text"
                name="major_party_person"
                v-model="major_party_person"
                title="请输入大于或等于零的阿拉伯数字"
              />
            </div>
            <div style="display: flex;
          align-items: center;">
              <label for>是否选派党建工作指导员:</label>
              <label class="label">
                <input
                  type="radio"
                  name="is_choice_instructor"
                  value="1"
                  v-model="is_choice_instructor"
                />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
                <input
                  type="radio"
                  name="is_choice_instructor"
                  value="2"
                  v-model="is_choice_instructor"
                />&nbsp;&nbsp;否
              </label>
            </div>
            <div>
              <label for>党组织年度活动经费(万元):</label>
              <input type="text" name="year_money" v-model="year_money" title="请输入大于或等于零的阿拉伯数字" />
            </div>
            <div>
              <label for>党组织年度活动场所面积(平米):</label>
              <input type="text" name="active_year" v-model="active_year" title="请输入大于或等于零的阿拉伯数字" />
            </div>
          </div>
          <div
            @click="btn(2)"
            style="outline:none;display:flex;justify-content:center;margin-top:35px;"
          >
            <input type="submit" value="立即提交" />
          </div>
        </div>
      </form>

      <!-- succeed -->
      <div class="succeed" v-if="sub == 2">
        <div>
          <img :src="imgUrl.succeed" alt />
          <span>党组织申请已提交成功！</span>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from '../../components/HeaderNav'
import FooterNav from '../../components/FooterNav'

export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data () {
    return {
      imgUrl: {
        bg0: require('../../../static/img/bg0.png'),
        bg1: require('../../../static/img/bg1.png'),
        succeed: require('../../../static/img/succeed.png')
      },
      text: ['1 填写基本信息', '2 填写党组织信息', '3 提交审核'],
      sub: 0,
      index_num: 0,
      types: [],
      type: '',
      supervisor: '',
      reg_manage: '',
      work_person: '',
      flow_party_person: '',
      party_person: '',
      is_reg_party: '',
      is_reg_fun_party: '',
      party_name: '',
      party_pname: '',
      sec_name: '',
      sec_sex: '',
      sec_job: '',
      sec_age: '',
      sec_study: '',
      near_party_person: '',
      major_party_person: '',
      is_reg_group: '',
      is_choice_instructor: '',
      year_money: '',
      active_year: ''
    }
  },
  computed: {},
  watch: {},
  methods: {
    btn (n) {
      // let regz = /^(0|\+?[1-9][0-9]*)$/
      let s = this.sub
      s = n
      if (s === 1) {
        if (this.type === '' || this.flow_party_person === '' || this.party_person === '' || this.work_person === '' ||
          this.party_name === '' || this.is_reg_party === '' || this.is_reg_fun_party === '' ||
          this.reg_manage === '' || this.supervisor === '' || this.party_pname === ''
        ) {
          alert('以上内容不可为空！')
        } else {
          if (this.flow_party_person < 0 || this.party_person < 0 || this.work_person < 0) {
            alert('不能出现负数呦！')
          } else {
            this.sub = s
          }
        }
      }
      if (s === 2) {
        if (this.sec_name === '' || this.sec_sex === '' || this.sec_age === '' || this.sec_job === '' ||
          this.sec_study === '' || this.near_party_person === '' || this.is_reg_group === '' ||
          this.major_party_person === '' || this.is_choice_instructor === '' || this.year_money === '' ||
          this.active_year === ''
        ) {
          alert('以上内容不可为空！')
        } else if (isNaN(this.sec_age) || isNaN(this.sec_study) || isNaN(this.near_party_person) ||
          isNaN(this.major_party_person) || isNaN(this.year_money) || isNaN(this.active_year)
        ) {
          alert('请输入数字！')
        } else if (this.sec_age < 0 || this.sec_study < 0 || this.near_party_person < 0 ||
          this.major_party_person < 0 || this.year_money < 0 || this.active_year < 0
        ) {
          alert('请输入大于或等于零的阿拉伯数字!')
        } else {
          let sid = sessionStorage.id
          let _this = this
          this.$http({
            method: 'post',
            url: 'v1/user/apply',
            data: {
              sid: sid,
              type: _this.type,
              supervisor: _this.supervisor,
              reg_manage: _this.reg_manage,
              work_person: _this.work_person,
              flow_party_person: _this.flow_party_person,
              party_person: _this.party_person,
              is_reg_party: _this.is_reg_party,
              is_reg_fun_party: _this.is_reg_fun_party,
              party_name: _this.party_name,
              party_pname: _this.party_pname,
              sec_name: _this.sec_name,
              sec_sex: _this.sec_sex,
              sec_job: _this.sec_job,
              sec_age: _this.sec_age,
              sec_study: _this.sec_study,
              near_party_person: _this.near_party_person,
              major_party_person: _this.major_party_person,
              is_reg_group: _this.is_reg_group,
              is_choice_instructor: _this.is_choice_instructor,
              year_money: _this.year_money,
              active_year: _this.active_year
            }
          }).then(res => {
            if (res.data.code === 200) {
              if (res.data.data.code !== 200) {
                alert(res.data.data.msg)
                return
              }
              _this.sub = s
            } else {
              _this.$message.warning(res.data.message)
            }
          })
            .catch(err => {
              console.log(err)
            })
        }
      }
    },
    getData () {
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/user/get-society-type',
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          _this.types = res.data.data
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {
    this.name = sessionStorage.name
    this.getData()
  },
  mounted () { }
}
</script>

<style lang='scss' scoped>
.wr {
  min-width: 1280px;
  box-sizing: border-box;

  .footer {
    margin-top: 80px;
  }
}

.wrapperr {
  width: 1200px;
  margin: 40px auto;
  padding: 34px 31px 100px;
  box-sizing: border-box;
  background-color: #ffffff;

  .succeed {
    margin-top: 70px;

    div {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      img {
        width: 118px;
        height: 118px;
        margin-bottom: 28px;
      }

      span {
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }
  }

  form {
    h3 {
      width: 1138px;
      height: 38px;
      font-family: "MicrosoftYaHei";
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
      border-bottom: 2px solid #dedede;
      padding-left: 30px;
      box-sizing: border-box;
      margin-bottom: 58px;
    }

    input[type="submit"] {
      outline: none;
    }

    label input[type="radio"] {
      width: 17px;
      height: 17px;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      margin: 0;
      cursor: pointer;
    }

    label input[type="radio"]:after {
      width: 17px;
      height: 17px;
      display: block;
      content: "";
      background: url("../../../static/img/wxz.png") no-repeat;
      background-size: 100% 100%;
    }

    label input[type="radio"]:checked:after {
      background: url("../../../static/img/xz.png") no-repeat;
    }

    #boxTwo {
      .b {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        div {
          margin-bottom: 30px;
          height: 43px;

          label {
            text-align: right;
            width: 229px;
            height: 16px;
            display: inline-block;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }

          input[type="text"] {
            margin-left: 28px;
            width: 386px;
            height: 43px;
            background-color: #ffffff;
            border: solid 1px #c7c7c7;
            outline: none;
            padding-left: 30px;
            box-sizing: border-box;
          }

          .label {
            width: 386px;
            height: 43px;
            margin-left: 30px;
            display: flex;
            align-items: center;
          }
        }
      }

      input[type="submit"] {
        width: 330px;
        height: 63px;
        line-height: 63px;
        text-align: center;
        background-color: #e60012;
        border-radius: 5px;

        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }

    #boxOne {
      .b {
        width: 100%;

        .o-two {
          width: 100%;
          height: 43px;
          display: flex;
          align-items: center;
          padding-left: 16px;
          box-sizing: border-box;
          margin-bottom: 60px;

          label {
            display: inline-block;
            width: 181px;
            height: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }

          input {
            width: 913px;
            height: 43px;
            background-color: #ffffff;
            border: solid 1px #c7c7c7;
            margin-left: 28px;
            outline: none;
            padding-left: 30px;
            box-sizing: border-box;
          }
        }

        .o-o {
          width: 100%;
          height: 43px;
          display: flex;
          align-items: center;
          padding-left: 96px;
          box-sizing: border-box;
          margin-bottom: 25px;

          label {
            display: inline-block;
            width: 101px;
            height: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }

          input {
            width: 913px;
            height: 43px;
            background-color: #ffffff;
            border: solid 1px #c7c7c7;
            margin-left: 28px;
            outline: none;
            padding-left: 30px;
            box-sizing: border-box;
          }
        }

        .o-one {
          width: 100%;
          height: 43px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          margin-bottom: 11px;

          div {
            margin-left: 30px;
            display: flex;
            align-items: center;

            label {
              display: flex;
              align-items: center;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 25px;
              letter-spacing: 0px;
              color: #333333;
            }

            /*
              label input[type="radio"] {
                width: 17px;
                height: 17px;
                appearance: none;
                -webkit-appearance: none;
                outline: none;
                margin: 0;
                cursor: pointer;
              }
              label input[type="radio"]:after {
                width: 17px;
                height: 17px;
                display: block;
                content: "";
                background: url("../../../static/img/wxz.png") no-repeat;
                background-size: 100% 100%;
              }

              label input[type="radio"]:checked:after {
                background: url("../../../static/img/xz.png") no-repeat;
              }*/
          }

          span {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }
        }

        .o-zero {
          margin-bottom: 11px;
          width: 100%;
          height: 43px;
          padding-left: 80px;
          box-sizing: border-box;
          display: flex;
          align-items: center;

          div {
            margin-left: 30px;
            display: flex;
            align-items: center;

            label {
              display: flex;
              align-items: center;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 25px;
              letter-spacing: 0px;
              color: #333333;
            }

            /*
              label input[type="radio"] {
                width: 17px;
                height: 17px;
                appearance: none;
                -webkit-appearance: none;
                outline: none;
                margin: 0;
                cursor: pointer;
              }
              label input[type="radio"]:after {
                width: 17px;
                height: 17px;
                display: block;
                content: "";
                background: url("../../../static/img/wxz.png") no-repeat;
                background-size: 100% 100%;
              }

              label input[type="radio"]:checked:after {
                background: url("../../../static/img/xz.png") no-repeat;
              }
              */
          }

          span {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }
        }

        .o {
          margin-bottom: 30px;
          width: 100%;
          height: 43px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 96px;
          box-sizing: border-box;

          label {
            // width: 547px;
            height: 43px;
            display: inline-block;
            box-sizing: border-box;

            select {
              width: 386px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              box-sizing: border-box;
              padding-left: 30px;
              box-sizing: border-box;

              /* 清除默认的箭头样式 */
              appearance: none;
              -moz-appearance: none;
              -webkit-appearance: none;
              /* 右侧添加小箭头的背景图 */
              background: url("../../../static/img/xa.png") 360px center
                no-repeat;
              background-size: 14px 8px;
            }

            .input {
              width: 386px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              box-sizing: border-box;
              padding-left: 30px;
              box-sizing: border-box;
            }

            span {
              margin-right: 20px;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #333;
              display: inline-block;
              width: 101px;
              text-align: right;
              white-space: nowrap;
            }
          }
        }
      }

      .btn {
        cursor: pointer;
        margin: 0 auto;
        width: 230px;
        height: 63px;
        background-color: #e60012;
        border-radius: 5px;
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        color: #ffffff;
        text-align: center;
      }
    }
  }

  .he {
    margin: 44px auto 70px;
    width: 598px;
    height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .list {
      width: 192px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      background-size: 100% 100%;
      font-family: "MicrosoftYaHei";
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
    }
  }

  .title {
    text-align: center;
    font-family: "MicrosoftYaHei";
    font-size: 22px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }
}
</style>
